<template>
  <div>
    <!--备注:
            size:大小
            callback:方法接收一个参数,参数格式为数组,下标为1的元素为结束时间的当天零点
            default_start:开始时间戳13位
            default_end:结束时间戳13位,
    -->
    <el-date-picker
      v-model="start"
      type="date"
      :size="size"
      :picker-options="pickerOptions1"
      placeholder="选择开始时间"
      format="yyyy 年 MM 月 dd 日"
    ></el-date-picker>
    <span class="wspan">-</span>
    <el-date-picker
      v-model="end"
      :size="size"
      type="date"
      :picker-options="pickerOptions2"
      placeholder="选择结束时间"
      format="yyyy  MM 月 dd 日"
    ></el-date-picker>
  </div>
</template>
<script>
export default {
  props: {
    callback: {
      type: Function,
      default: function () {},
    },
    size: {
      type: String,
    },
    default_start: {
      type: [String, Number],
    },
    default_end: {
      type: [String, Number],
    },
  },
  data() {
    return {
      start: "",
      end: "",
      pickerOptions1: {},
      pickerOptions2: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7;
        },
      },
      value1: "",
    };
  },
  watch: {
    start: function (value) {
      let _this = this;
      if (value) {
        if (this.end) {
          this.callback([value.getTime(), this.end.getTime()]);
        } else {
          this.callback([value.getTime(), Date.now()]);
        }
        this.pickerOptions2 = {
          disabledDate(time) {
            return time.getTime() < value.getTime();
          },
        };
      } else {
        this.pickerOptions2 = {};
        if (this.end) {
          this.callback([0, this.end.getTime()]);
          this.pickerOptions1 = {
            disabledDate(time) {
              if (_this.end) {
                return time.getTime() > _this.end.getTime();
              }
            },
          };
        } else {
          this.callback([0, Date.now()]);
          this.pickerOptions1 = this.pickerOptions;
        }
      }
    },
    end: function (value) {
      let _this = this;
      if (value) {
        if (this.start) {
          this.callback([this.start.getTime(), value.getTime()]);
        } else {
          this.callback([0, value.getTime()]);
        }

        this.pickerOptions1 = {
          disabledDate(time) {
            return time.getTime() > value.getTime();
          },
        };
      } else {
        this.pickerOptions1 = {};
        if (this.start) {
          this.callback([this.start.getTime(), Date.now()]);
          this.pickerOptions2 = {
            disabledDate(time) {
              if (_this.start) {
                return time.getTime() < _this.start.getTime();
              }
            },
          };
        } else {
          this.callback([0, Date.now()]);
          this.pickerOptions2 = this.pickerOptions;
        }
      }
    },
  },
  methods: {},
  mounted() {
    if (this.default_start) {
      this.start = new Date(this.default_start);
    }
    if (this.default_end) {
      this.end = new Date(this.default_end);
    }
  },
};
</script>
<style scoped>
.wspan {
  color: #cecece;
}
</style>